<template>
	<view>
		<view class="staff">
			<view class="staff-em"></view>
			<view class="staff-text">本次活动详情</view>
		</view>

		<!-- <scroll-view scroll-y :style="'height:'+scrollH+'px;'"> -->
			<view>
				<view class="text">活动名称：</view>
				<view class="p-1 br-1 bg-light-secondary">{{ activity_detail_data.title }}</view>
			</view>

			<view>
				<view class="text">活动内容：</view>
				<view class="p-1 br-1 bg-light-secondary">{{ activity_detail_data.content }}</view>
			</view>

			<view class="d-flex a-center mt-1 mb-2">
				<view>背景色：</view>
				<view :style="{background:this.activity_detail_data.background}" class="boxshadow"></view>
			</view>
			<divider />

			<view>
				<view class="text">头部图片：</view>
				<view v-if="activity_detail_data.top_img">
					<image :src="activity_detail_data.top_img" style="width: 100%;" />
				</view>
				<view v-else>
					<view class="mt-1 text-center mb-2">还没有头部图片，快去上传吧</view>
				</view>
				<divider />

				<view class="text">底部图片：</view>
				<view v-if="activity_detail_data.bottom_img">
					<image :src="activity_detail_data.bottom_img" style="width: 100%;" />
				</view>
				<view v-else>
					<view class="mt-1 text-center mb-2">还没有底部图片，快去上传吧</view>
				</view>
				<divider />
				
				<view class="text">视频头部图片：</view>
				<view v-if="activity_detail_data.video_top_img">
					<image :src="activity_detail_data.video_top_img" style="width: 100%;" />
				</view>
				<view v-else>
					<view class="mt-1 text-center mb-2">还没有头部图片，快去上传吧</view>
				</view>
				<divider />

				<view>
					<view class="text">宣传主视频：</view>
					<view v-if="activity_detail_data.main_video">
						<video :src="activity_detail_data.main_video" class="video1" :poster="activity_detail_data.main_video_cover" controls="true"></video>
					</view>

					<view v-else>
						<view class="mt-1 text-center mb-2">还没有视频，快去上传吧</view>
					</view>
				</view>
				<divider />

				<view>
					<view class="text">宣传视频：</view>
					<divider />
					<view v-if="videoShow">
						<view v-for="(item,index) in activity_detail_data.video_list" :key="index">
							<view class="mb-1 mt-1">{{item.title}}</view>
							<video :src="item.video_url" :poster="item.video_cover" class="video1"></video>
							<divider />
						</view>
					</view>

					<view v-else>
						<view class="mt-1 text-center mb-2">还没有视频，快去上传吧</view>
					</view>
				</view>

			</view>
			<noMore style="margin-bottom: 120rpx;" />
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	export default {
		props: {
			scrollH: null,
			activity_detail_data: null,
			videoShow: Boolean,
		},

		updated() {
			// console.log(this.activity_detail_data,223);
			if (this.activity_detail_data.video_list.length > 0) {
				this.videoShow = true
			}
		},

	}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	.staff {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 10rpx 0 20rpx 0;

		.staff-em {
			height: 35rpx;
			width: 10rpx;
			background-color: #475dfc;
			border-radius: 50rpx;
		}

		.staff-text {
			font-weight: bold;
			margin-left: 10rpx;
		}
	}

	.text {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.boxshadow {
		width: 40rpx;
		height: 40rpx;
		border: solid 4rpx #999;
		box-shadow: 7rpx 7rpx #d9d9d9;
		border-radius: 5rpx;
	}

	.video1 {
		width: 100%;
		height: 300rpx;
	}
</style>
